import 'package:cached_network_image/cached_network_image.dart';
/**
 * 排行榜页
 * page排行榜
 */
import 'package:flutter/material.dart';
import 'package:qgchat/bloc/blocProvider.dart';
import 'package:qgchat/bloc/live/ranking.dart';
import 'package:qgchat/common/global/global.dart';
import 'package:qgchat/http/models/flattererUserdayModel.dart';

class Ranking extends StatefulWidget {
  Ranking(this.memberToken, {Key key}) : super(key: key);

  final String memberToken;

  @override
  _RankingState createState() => _RankingState();
}

class _RankingState extends State<Ranking> with SingleTickerProviderStateMixin {
  List<String> tabTitles = ["今日", "今周", "总榜"];
  TabController tabarController;
  RankingBloc bloc;

  @override
  void initState() {
    super.initState();
    print(widget.memberToken);
    tabarController = TabController(length: tabTitles.length, vsync: this);
  }

  @override
  void dispose() {
    super.dispose();
    tabarController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    bloc = BlocProvider.of<RankingBloc>(context);

    return Container(
      decoration: BoxDecoration(
        image: DecorationImage(
          image: AssetImage(
            'assets/images/tuoyuanbg.png',
          ),
          fit: BoxFit.contain,
          alignment: Alignment.topCenter,
        ),
        gradient: LinearGradient(
          colors: [col("9b36da"), col("eb6541")],
          begin: FractionalOffset(0, 0),
          end: FractionalOffset(1, 0.5),
        ),
      ),
      child: Scaffold(
        backgroundColor: Colors.transparent,
        appBar: appBarHandle(),
        body: bodyHandle(),
      ),
    );
  }

  // 生成appbar
  AppBar appBarHandle() {
    return AppBar(
      centerTitle: true,
      leading: IconButton(
        onPressed: () => Navigator.pop(context),
        icon: Icon(
          Icons.keyboard_arrow_left,
          color: Colors.white,
        ),
        iconSize: px(50),
      ),
      backgroundColor: Colors.transparent,
      brightness: Brightness.dark,
      elevation: 0,
      title: Text(
        "排行榜",
        style: TextStyle(
          color: Colors.white,
          fontSize: px(34),
          fontWeight: FontWeight.bold,
        ),
      ),
      bottom: TabBar(
        isScrollable: true,
        controller: tabarController,
        labelColor: Colors.white,
        labelPadding: EdgeInsets.symmetric(horizontal: px(70)),
        labelStyle: TextStyle(
          fontWeight: FontWeight.bold,
        ),
        unselectedLabelStyle: TextStyle(fontSize: px(32)),
        unselectedLabelColor: col("fafafa"),
        indicatorColor: Colors.white,
        indicatorSize: TabBarIndicatorSize.label,
        indicatorWeight: px(4),
        tabs: tabTitles.map<Tab>((item) {
          return Tab(text: item);
        }).toList(),
      ),
    );
  }

  // 生成body
  Widget bodyHandle() {
    return Container(
      child: TabBarView(
        controller: tabarController,
        children: [
          StreamBuilder(
            stream: bloc.dayStream,
            builder: (BuildContext context, AsyncSnapshot snapshot) {
              return rankHandle(bloc.dayRank);
            },
          ),
          StreamBuilder(
            stream: bloc.weekStream,
            builder: (BuildContext context, AsyncSnapshot snapshot) {
              return rankHandle(bloc.weekRank);
            },
          ),
          StreamBuilder(
            stream: bloc.totalStream,
            builder: (BuildContext context, AsyncSnapshot snapshot) {
              return rankHandle(bloc.totalRank);
            },
          ),
        ],
      ),
    );
  }

  // 生成每日
  Widget rankHandle(List<FlattererUserdayModel> list) {
    List<Widget> topThreeList = [];

    switch (list.length) {
      case 0:
        topThreeList = [
          second(hasData: false),
          first(hasData: false),
          third(hasData: false),
        ];
        break;
      case 1:
        topThreeList = [
          second(hasData: false),
          first(hasData: true, list: list[0]),
          third(hasData: false),
        ];
        break;
      case 2:
        topThreeList = [
          second(hasData: true, list: list[1]),
          first(hasData: true, list: list[0]),
          third(hasData: false),
        ];
        break;
      default:
        topThreeList = [
          second(hasData: true, list: list[1]),
          first(hasData: true, list: list[0]),
          third(hasData: true, list: list[2]),
        ];
        break;
    }

    // 冠亚季
    Widget topThree = Container(
      margin: EdgeInsets.only(top: px(40)),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: topThreeList,
      ),
    );

    Widget moreRank;
    if (list.length > 3) {
      moreRank = rankingList(list.sublist(3, list.length));
    } else {
      moreRank = Container();
    }

    return Container(
      child: ListView(
        padding: EdgeInsets.only(bottom: px(100)),
        children: <Widget>[
          topThree,
          moreRank,
        ],
      ),
    );
  }

  // 亚军
  Widget second({
    bool hasData,
    FlattererUserdayModel list,
  }) {
    var headImage;
    if (hasData) {
      headImage = Container(
        width: px(124),
        height: px(124),
        child: CachedNetworkImage(
          imageUrl: "${list.memberHead}",
          fit: BoxFit.cover,
          errorWidget: (context, url, error) {
            return Config.errorNetImage;
          },
        ),
      );
    } else {
      headImage = Image.asset(
        "assets/images/icon/logo.jpg",
        width: px(124),
        height: px(124),
        fit: BoxFit.cover,
      );
    }
    return Container(
      child: Column(
        children: <Widget>[
          Container(
            height: px(250),
            alignment: Alignment.bottomCenter,
            child: Stack(
              overflow: Overflow.visible,
              children: <Widget>[
                Container(
                  width: px(124),
                  height: px(124),
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(px(78)),
                    border: Border.all(
                      color: col("c8c7c5"),
                      width: px(4),
                    ),
                  ),
                  child: ClipOval(
                    child: headImage,
                  ),
                ),
                Positioned(
                  top: -px(34),
                  left: px(30),
                  child: Image.asset(
                    "assets/images/icon/crown1.png",
                    width: px(62),
                    height: px(44),
                  ),
                )
              ],
            ),
          ),
          Container(
            width: px(150),
            margin: EdgeInsets.only(top: px(40)),
            child: Text(
              "${hasData ? list.memberNickname : "暂无"}",
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
              textAlign: TextAlign.center,
              style: TextStyle(
                height: 0.99,
                color: Colors.white,
                fontSize: px(32),
              ),
            ),
          ),
          Container(
            margin: EdgeInsets.only(top: px(20)),
            child: Row(
              children: <Widget>[
                Container(
                  margin: EdgeInsets.only(right: px(9)),
                  child: Image.asset(
                    "assets/images/icon/star2.png",
                    width: px(31),
                    height: px(34),
                  ),
                ),
                Text(
                  "${hasData ? list.gold1 : "0"}",
                  style: TextStyle(
                    height: 0.99,
                    color: Colors.white,
                    fontSize: px(28),
                  ),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }

  // 冠军
  Widget first({
    bool hasData,
    FlattererUserdayModel list,
  }) {
    var headImage;
    if (hasData) {
      headImage = Container(
        width: px(124),
        height: px(124),
        child: CachedNetworkImage(
          imageUrl: "${list.memberHead}",
          fit: BoxFit.cover,
          errorWidget: (context, url, error) {
            return Config.errorNetImage;
          },
        ),
      );
    } else {
      headImage = Image.asset(
        "assets/images/icon/logo.jpg",
        width: px(124),
        height: px(124),
        fit: BoxFit.cover,
      );
    }
    return Container(
      child: Column(
        children: <Widget>[
          Container(
            height: px(250),
            alignment: Alignment.bottomCenter,
            child: Stack(
              overflow: Overflow.visible,
              children: <Widget>[
                Container(
                  width: px(200),
                  height: px(200),
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(px(100)),
                    border: Border.all(
                      color: col("ffe09e"),
                      width: px(4),
                    ),
                  ),
                  child: ClipOval(
                    child: headImage,
                  ),
                ),
                Positioned(
                  top: -px(51),
                  left: px(60),
                  child: Image.asset(
                    "assets/images/icon/crown2.png",
                    width: px(82),
                    height: px(58),
                  ),
                )
              ],
            ),
          ),
          Container(
            width: px(230),
            margin: EdgeInsets.only(top: px(40)),
            child: Text(
              "${hasData ? list.memberNickname : "暂无"}",
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
              textAlign: TextAlign.center,
              style: TextStyle(
                height: 0.99,
                color: Colors.white,
                fontSize: px(32),
              ),
            ),
          ),
          Container(
            margin: EdgeInsets.only(top: px(20)),
            child: Row(
              children: <Widget>[
                Container(
                  margin: EdgeInsets.only(right: px(9)),
                  child: Image.asset(
                    "assets/images/icon/star2.png",
                    width: px(31),
                    height: px(34),
                  ),
                ),
                Text(
                  "${hasData ? list.gold1 : "0"}",
                  style: TextStyle(
                    height: 0.99,
                    color: Colors.white,
                    fontSize: px(28),
                  ),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }

  // 季军
  Widget third({
    bool hasData,
    FlattererUserdayModel list,
  }) {
    var headImage;
    if (hasData) {
      headImage = Container(
        width: px(124),
        height: px(124),
        child: CachedNetworkImage(
          imageUrl: "${list.memberHead}",
          fit: BoxFit.cover,
          errorWidget: (context, url, error) {
            return Config.errorNetImage;
          },
        ),
      );
    } else {
      headImage = Image.asset(
        "assets/images/icon/logo.jpg",
        width: px(124),
        height: px(124),
        fit: BoxFit.cover,
      );
    }
    return Container(
      child: Column(
        children: <Widget>[
          Container(
            height: px(250),
            alignment: Alignment.bottomCenter,
            child: Stack(
              overflow: Overflow.visible,
              children: <Widget>[
                Container(
                  width: px(124),
                  height: px(124),
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(px(78)),
                    border: Border.all(
                      color: col("f9a470"),
                      width: px(4),
                    ),
                  ),
                  child: ClipOval(
                    child: headImage,
                  ),
                ),
                Positioned(
                  top: -px(34),
                  left: px(30),
                  child: Image.asset(
                    "assets/images/icon/crown3.png",
                    width: px(62),
                    height: px(44),
                  ),
                )
              ],
            ),
          ),
          Container(
            width: px(150),
            margin: EdgeInsets.only(top: px(40)),
            child: Text(
              "${hasData ? list.memberNickname : "暂无"}",
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
              textAlign: TextAlign.center,
              style: TextStyle(
                height: 0.99,
                color: Colors.white,
                fontSize: px(32),
              ),
            ),
          ),
          Container(
            margin: EdgeInsets.only(top: px(20)),
            child: Row(
              children: <Widget>[
                Container(
                  margin: EdgeInsets.only(right: px(9)),
                  child: Image.asset(
                    "assets/images/icon/star2.png",
                    width: px(31),
                    height: px(34),
                  ),
                ),
                Text(
                  "${hasData ? list.gold1 : "0"}",
                  style: TextStyle(
                    height: 0.99,
                    color: Colors.white,
                    fontSize: px(28),
                  ),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }

  // 冠亚季外的10强
  Widget rankingList(List<FlattererUserdayModel> list) {
    return Container(
      margin: EdgeInsets.only(top: px(60), left: px(30), right: px(30)),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(px(22)),
        color: Colors.white,
      ),
      child: Column(
        children: list.asMap().keys.map<Widget>((i) {
          Border border;
          if (i != list.length - 1) {
            border = Border(
              bottom: BorderSide(
                color: col("edeff2"),
                width: 1,
              ),
            );
          }
          return Container(
            height: px(160),
            decoration: BoxDecoration(
              border: border,
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Container(
                  child: Row(
                    children: <Widget>[
                      Container(
                        alignment: Alignment.center,
                        width: px(60),
                        child: Text(
                          "${i + 4}",
                          style: TextStyle(
                            color: col("303133"),
                            fontSize: px(28),
                          ),
                        ),
                      ),
                      Container(
                        width: px(88),
                        height: px(88),
                        margin: EdgeInsets.only(right: px(20)),
                        child: ClipOval(
                          child: CachedNetworkImage(
                            imageUrl: "${list[i].memberHead}",
                            fit: BoxFit.cover,
                            errorWidget: (context, url, error) {
                              return Config.errorNetImage;
                            },
                          ),
                        ),
                      ),
                      Text(
                        "${list[i].memberNickname}",
                        maxLines: 1,
                        overflow: TextOverflow.ellipsis,
                        style: TextStyle(
                          color: col("303133"),
                          fontSize: px(32),
                        ),
                      ),
                    ],
                  ),
                ),
                Container(
                  width: px(220),
                  padding: EdgeInsets.symmetric(horizontal: px(20)),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: <Widget>[
                      Container(
                        margin: EdgeInsets.only(right: px(16)),
                        child: Image.asset(
                          "assets/images/icon/star.png",
                          width: px(30),
                          height: px(30),
                        ),
                      ),
                      Text(
                        "${list[i].gold1}",
                        maxLines: 1,
                        textAlign: TextAlign.end,
                        overflow: TextOverflow.ellipsis,
                        style: TextStyle(
                          height: 0.99,
                          color: col("303133"),
                          fontSize: px(28),
                        ),
                      )
                    ],
                  ),
                )
              ],
            ),
          );
        }).toList(),
      ),
    );
  }
}
